import { resolveComponent } from 'vue'
import { fliterDataWrapper } from 'common/js/table'
import { timeFilter } from 'common/js/utils'

export const columns = (that) => {

  return [
    {
      key: 'stcd',
      align: 'center',
      width: 120,
      title: '内涝点编码',
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'stcd')
      }
    },
    {
      key: 'name',
      align: 'center',
      title: '内涝点名称',
      width: 200,
      fixed: 'left',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'name')
      }
    },
    {
      key: 'area',
      title: '所属区域',
      align: 'center',
      fixed: 'left',
      width: 90,
      render: (h, params) => {
        const { row } = params

        return h('div', {}, [
          h('div', { }, row['district']),
          h('div', { }, row['zhenname'])
        ])
      }
    },
    // {
    //   key: 'area',
    //   title: '所属区域编码',
    //   align: 'center',
    //   width: 100,
    //   render: (h, params) => {
    //     const { row } = params

    //     return h('div', {}, [
    //       h('div', { }, row['addvcd']),
    //       h('div', { }, row['zhencode'])
    //     ])
    //   }
    // },
    {
      key: 'z',
      title: '水位',
      width: 90,
      align: 'center',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'z')
      }
    },
    {
      key: 'zTm',
      align: 'center',
      title: '水位时间',
      width: 105,
      render: (h, params) => {
         const { row } = params
        
        if (row.zTm) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.zTm), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.zTm), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    },
    {
      key: 'status',
      align: 'center',
      title: '水情状态',
      width: 100,
      render: (h, params) => {
        const { row } = params
        const status = row.status
        let color = '#19be6b' // 默认绿色

        // 根据状态设置不同颜色
        if (status === '水位延迟') {
          color = '#ff9900'
        } else if (status === '水位离线') {
          color = 'gray'
        } else if (status === '水位缺失') {
          color = '#ed4014'
        }

        return h('span', { style: { color } }, row.status || '--')
      }
    },
    {
      key: 'videoDetail',
      align: 'center',
      title: '视频在线情况',
      width: 300,
      render: (h, params) => {
        const { row } = params
        const videoDetail = row.__custom_videoDetail || []

        const renArr = []

        if (videoDetail) {
          for (let i = 0; i <= videoDetail.length - 1; i++) {
            const item = videoDetail[i]

            renArr.push(
              h('div', {
                style: {
                  'width': '100%',
                  'display': 'flex',
                  'align-items': 'center',
                  'overflow': 'hidden'
                }
              }, [
                h('div', {
                  title: item['DEVICENAME'],
                  style: {
                    'white-space': 'nowrap',
                    'flex': '0 0 250px',
                    'overflow': 'hidden',
                    'text-overflow': 'ellipsis',
                    'word-break': 'break-all',
                    'text-align': 'left'
                  }
                }, `（${ i + 1 }）${item['DEVICENAME'] || '--'}`),
                h('div', {
                  style: {
                    'margin-left': '10px',
                    'color':item['STATUS'] === 'ON' ? '#19be6b' : '#ed4014'
                  }
                }, item['STATUS'] === 'ON' ? '在线' : '离线')
              ]) 
            )
          }
        } else {
          renArr.push(h('span', {}, '--'))
        }
        
        return h('div', {}, renArr)
      }
    },
    {
      key: '__custom_videoDetailStatus',
      align: 'center',
      title: '视频状态',
      width: 110,
      render: (h, params) => {
        const { row } = params
        const statusStr = row.__custom_videoDetailStatus
        let color = '#19be6b'

        if (statusStr === '视频缺失') {
          color = '#ed4014'
        } else if (statusStr === '视频部分在线') {
          color = '#ff9900'
        } else if (statusStr === '视频全部离线') {
          color = 'gray'
        }

        return h('span', { style: { color } }, statusStr)
      }
    },
    {
      key: 'stsys',
      align: 'center',
      title: '数据来源',
      render: (h, params) => {
        const { row } = params

        return fliterDataWrapper(h, row, 'stsys')
      }
    },
    {
      key: 'createTime',
      align: 'center',
      title: '统计时间',
      width: 105,
      render: (h, params) => {
        const { row } = params
        
        if (row.createTime) {
          return h('div', {}, [
            h('div', {}, timeFilter(new Date(row.createTime), 'yyyy-MM-dd')),
            h('div', {}, timeFilter(new Date(row.createTime), 'HH:mm:ss')),
          ])
        } else {
          return h('div', {}, '--')
        }
      }
    }
  ]
}

export const sourceList = () => [
  { value: '物联网平台', label: '物联网平台' },
  { value: '水务工程监测设施建设项目', label: '水务工程监测设施建设项目' },
  { value: '省水利大数据平台', label: '省厅平台' },
  { value: '南海区水旱灾害防御系统', label: '南海区局平台' },
  { value: '南海瀚蓝', label: '南海瀚蓝' },
  { value: '三水淼通', label: '三水淼通' },
  { value: '汇之源高畅排水', label: '高明高畅' },
  // { value: '海锝智能', label: '海锝智能' },
  { value: '市交通局', label: '市交通局' }
]